<template>
  <div class="article-edit">
    <el-card class="!border-none" shadow="never">
      <el-page-header :content="$route.meta.title" @back="$router.back()" />
    </el-card>
    <el-card class="!border-none mt-4" shadow="never">
      <el-descriptions title="赛事信息">
        <el-descriptions-item label="名称">{{formData.name}}</el-descriptions-item>
        <el-descriptions-item label="比赛时间">{{formData.playTime}}~{{formData.playEndTime}}</el-descriptions-item>
        <el-descriptions-item label="比赛方式">
          <el-tag v-if="formData.playType.includes('0')||(formData.playType.includes('1')&&formData.playType.includes('2')&&formData.playType.includes('3')&&formData.playType.includes('4')&&formData.playType.includes('5'))">全类型</el-tag>
          <el-tag type="success" v-if="formData.playType.includes('1')">男单打</el-tag>&nbsp;
          <el-tag type="danger" v-if="formData.playType.includes('2')">女单打</el-tag>&nbsp;
          <el-tag type="success" v-if="formData.playType.includes('3')">男双打</el-tag>&nbsp;
          <el-tag type="danger" v-if="formData.playType.includes('4')">女双打</el-tag>&nbsp;
          <el-tag type="" v-if="formData.playType.includes('5')">男女混打</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag v-if="formData.status == 0">待审核</el-tag>
          <el-tag type="success" v-else-if="formData.status == 1">正常</el-tag>
          <el-tag type="info" v-else-if="formData.status == 5">结束</el-tag>
          <el-tag type="danger" v-else-if="formData.status == 2">不通过</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="组织方">{{formData.orgParty}}</el-descriptions-item>
        <el-descriptions-item label="比赛赛程">
          <el-tag v-if="formData.schedule == 1">初赛</el-tag>
          <el-tag type="danger" v-else-if="formData.schedule == 2">半决赛</el-tag>
          <el-tag type="danger" v-else-if="formData.schedule == 3">总决赛</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card class="!border-none mt-4" shadow="never">
      <el-tabs v-model="activeName" @tab-change="handleTabChange">
        <el-tab-pane label="报名列表" name="apply">
          <el-row>
              <el-select v-model="queryParams.neverSchedule" @change="handleChangeNaver" placeholder="请选择赛事赛程" style="margin-right: 10px;">
                <el-option :disabled="formData.schedule<1" value="1" label="初赛"></el-option>
                <el-option :disabled="formData.schedule<2" value="2" label="半决赛"></el-option>
                <el-option :disabled="formData.schedule<3" value="3" label="总决赛"></el-option>
              </el-select>
              <el-button type="primary" @click="hangleExcelApply">导入报名信息</el-button>
              <el-button type="primary" @click="hangleAddApply">添加报名信息</el-button>
          </el-row>
          <el-table class="mt-4" size="large" v-loading="pager.loading" :data="pager.lists">
            <el-table-column label="团队编号" prop="teamNo" min-width="100" />
            <el-table-column label="比赛方式" min-width="100">
              <template #default="{ row }">
                <el-tag type="success" v-if="row.applyType == 1">男单打</el-tag>
                <el-tag type="danger" v-else-if="row.applyType == 2">女单打</el-tag>
                <el-tag type="danger" v-else-if="row.applyType == 3">男双打</el-tag>
                <el-tag type="danger" v-else-if="row.applyType == 4">女双打</el-tag>
                <el-tag type="danger" v-else-if="row.applyType == 5">男女混打</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="报名时间" prop="createTime" min-width="100" />
            <el-table-column label="报名选手" prop="address" min-width="100" >
              <template #default="{ row }">
                <div v-if="row.realName">
                  <div v-if="row.realName.includes(',')" :key="index" v-for="(item,index) in splitRealName(row.realName)">{{item}}</div>
                  <div v-else>{{row.realName}}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="胜负" prop="teamNo" min-width="80">
              <template #default="{ row }">
              <el-tag type="success">胜</el-tag>{{row.shengNum}}
              <el-tag type="danger">负</el-tag>{{row.baiNum}}
              </template>
            </el-table-column>
            <el-table-column label="积分" prop="jifen" min-width="60" />
            <el-table-column label="状态" prop="status" min-width="100">
              <template #default="{ row }">
                <el-tag v-if="row.status == 0">待审核</el-tag>
                <el-tag type="success" v-else-if="row.status == 1">正常</el-tag>
                <el-tag type="danger" v-else-if="row.status == 2">不通过</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="160" fixed="right">
              <template #default="{ row }">
                <el-button
                    v-perms="['competition.list/examine']"
                    :disabled="row.status == 1"
                    type="primary"
                    link
                    @click="handleExamine(row)"
                >
                  审核
                </el-button>
                <el-button
                    v-perms="['competition.list/examine']"
                    type="primary"
                    link
                    @click="handleApplyDetail(row)"
                >
                  详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="flex justify-end mt-4">
            <pagination v-model="pager" @change="getApplyLists" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="赛程信息" name="session">
          <el-row>
            <el-form ref="formRef" class="mb-[-8px]" :model="queryParams" :inline="true">
              <el-form-item label="" prop="schedule">
                <el-select v-model="queryParams.schedule" @change="handleChangeSession" placeholder="请选择赛事赛程">
                  <el-option :disabled="formData.schedule<1" value="1" label="初赛"></el-option>
                  <el-option :disabled="formData.schedule<2" value="2" label="半决赛"></el-option>
                  <el-option :disabled="formData.schedule<3" value="3" label="总决赛"></el-option>
                </el-select>
                <el-button style="margin-left: 10px;" type="primary" @click="hangleBiSai">生成赛事场次</el-button>
              </el-form-item>
            </el-form>
          </el-row>
          <el-row :gutter="20" class="el-box">
            <el-col :span="5" v-if="formData.playType.includes('1')||formData.playType.includes('0')">
              <el-card class="match-card">
                <template #header>
                  <span>男单打出场顺序</span>
                  <div style="font-size: 12px;font-weight: 700;" v-if="sessionData.playAddressOne">{{sessionData.playAddressOne.address}} {{sessionData.playAddressOne.name}}</div>
                </template>
                <div>
                  <ul>
                    <li v-for="(pair, index) in sessionData.playTypeOne" :key="index">
                      <div class="match-header">
                        <span class="order">
                          <span>第{{ index + 1 }}场</span>&nbsp;<span>{{pair.startTime}}</span>
                        </span>
                        <span class="handle" v-if="pair.status==0">
                          <span @click="handleMatchEdit(pair)"><icon name="el-icon-Edit" /></span>
                          <el-button @click="handleUp(pair,index,sessionData.playTypeOne)" :disabled="index==0">
                            <el-tooltip
                                class="box-item"
                                content="向上移"
                                placement="top"
                            >
                              <icon name="el-icon-CaretTop" />
                            </el-tooltip>
                          </el-button>
                          <el-button @click="handleDown(pair,index,sessionData.playTypeOne)" :disabled="index==(sessionData.playTypeOne.length - 1)">
                            <el-tooltip
                                class="box-item"
                                content="向下移"
                                placement="top"
                            >
                              <icon name="el-icon-CaretBottom" />
                            </el-tooltip>
                          </el-button>
                        </span>
                      </div>
                      <div class="match-info" @click="handleMatchEdit(pair)">
                        <div class="team">
                          <div v-for="(player, playerIndex) in pair.teamOne" :key="playerIndex" class="player-info">
                            <el-avatar :size="30" :src="player.avatar" />
                            <span class="single-line">{{ player.name }}</span>
                          </div>
                        </div>
                        <div>
                          <span class="score-text">{{pair.playOneScore}}</span>&nbsp;
                          <span class="vs-text">VS</span>
                          <span class="score-text">{{pair.playTwoScore}}</span>
                        </div>
                        <div class="team">
                          <div v-for="(player, playerIndex) in pair.teamTwo" :key="playerIndex" class="player-info">
                            <el-avatar :size="30" :src="player.avatar" />
                            <span class="single-line">{{ player.name }}</span>
                          </div>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </el-card>
            </el-col>
            <el-col :span="5" v-if="formData.playType.includes('3')||formData.playType.includes('0')">
              <el-card class="match-card">
                <template #header>
                  <span>男双打出场顺序</span>
                  <div style="font-size: 12px;font-weight: 700;" v-if="sessionData.playAddressThree">{{sessionData.playAddressThree.address}} {{sessionData.playAddressThree.name}}</div>
                </template>
                <div>
                  <ul>
                    <li v-for="(pair, index) in sessionData.playTypeThree" :key="index">
                      <div class="match-header">
                        <span class="order">
                          <span>第{{ index + 1 }}场</span>&nbsp;<span>{{pair.startTime}}</span>
                        </span>
                        <span class="handle" v-if="pair.status==0">
                          <span @click="handleMatchEdit(pair)"><icon name="el-icon-Edit" /></span>
                          <el-button @click="handleUp(pair,index,sessionData.playTypeThree)" :disabled="index==0">
                            <el-tooltip
                                class="box-item"
                                content="向上移"
                                placement="top"
                            >
                              <icon name="el-icon-CaretTop" />
                            </el-tooltip>
                          </el-button>
                          <el-button @click="handleDown(pair,index,sessionData.playTypeThree)" :disabled="index==(sessionData.playTypeThree.length - 1)">
                            <el-tooltip
                                class="box-item"
                                content="向下移"
                                placement="top"
                            >
                              <icon name="el-icon-CaretBottom" />
                            </el-tooltip>
                          </el-button>
                        </span>
                      </div>
                      <div class="match-info" @click="handleMatchEdit(pair)">
                        <div class="team">
                          <div v-for="(player, playerIndex) in pair.teamOne" :key="playerIndex" class="player-info">
                            <el-avatar :size="30" :src="player.avatar" />
                            <span class="single-line">{{ player.name }}</span>
                          </div>
                        </div>
                        <div>
                          <span class="score-text">{{pair.playOneScore}}</span>&nbsp;
                          <span class="vs-text">VS</span>&nbsp;
                          <span class="score-text">{{pair.playTwoScore}}</span>
                        </div>
                        <div class="team">
                          <div v-for="(player, playerIndex) in pair.teamTwo" :key="playerIndex" class="player-info">
                            <el-avatar :size="30" :src="player.avatar" />
                            <span class="single-line">{{ player.name }}</span>
                          </div>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </el-card>
            </el-col>
            <el-col :span="5" v-if="formData.playType.includes('2')||formData.playType.includes('0')">
              <el-card class="match-card">
                <template #header>
                  <span>女单打出场顺序</span>
                  <div style="font-size: 12px;font-weight: 700;" v-if="sessionData.playAddressTwo">{{sessionData.playAddressTwo.address}} {{sessionData.playAddressTwo.name}}</div>
                </template>
                <div>
                  <ul>
                    <li v-for="(pair, index) in sessionData.playTypeTwo" :key="index">
                      <div class="match-header">
                        <span class="order">
                          <span>第{{ index + 1 }}场</span>&nbsp;<span>{{pair.startTime}}</span>
                        </span>
                        <span class="handle" v-if="pair.status==0">
                          <span @click="handleMatchEdit(pair)"><icon name="el-icon-Edit" /></span>
                          <el-button @click="handleUp(pair,index,sessionData.playTypeTwo)" :disabled="index==0">
                            <el-tooltip
                                class="box-item"
                                content="向上移"
                                placement="top"
                            >
                              <icon name="el-icon-CaretTop" />
                            </el-tooltip>
                          </el-button>
                          <el-button @click="handleDown(pair,index,sessionData.playTypeTwo)" :disabled="index==(sessionData.playTypeTwo.length - 1)">
                            <el-tooltip
                                class="box-item"
                                content="向下移"
                                placement="top"
                            >
                              <icon name="el-icon-CaretBottom" />
                            </el-tooltip>
                          </el-button>
                        </span>
                      </div>
                      <div class="match-info" @click="handleMatchEdit(pair)">
                        <div class="team">
                          <div v-for="(player, playerIndex) in pair.teamOne" :key="playerIndex" class="player-info">
                            <el-avatar :size="30" :src="player.avatar" />
                            <span class="single-line">{{ player.name }}</span>
                          </div>
                        </div>
                        <div>
                          <span class="score-text">{{pair.playOneScore}}</span>
                          <span class="vs-text">VS</span>
                          <span class="score-text">{{pair.playTwoScore}}</span>
                        </div>
                        <div class="team">
                          <div v-for="(player, playerIndex) in pair.teamTwo" :key="playerIndex" class="player-info">
                            <el-avatar :size="30" :src="player.avatar" />
                            <span class="single-line">{{ player.name }}</span>
                          </div>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </el-card>
            </el-col>
            <el-col :span="5" v-if="formData.playType.includes('4')||formData.playType.includes('0')">
              <el-card class="match-card">
                <template #header>
                  <span>女双打出场顺序</span>
                  <div style="font-size: 12px;font-weight: 700;" v-if="sessionData.playAddressFour">{{sessionData.playAddressFour.address}} {{sessionData.playAddressFour.name}}</div>
                </template>
                <div>
                  <ul>
                    <li v-for="(pair, index) in sessionData.playTypeFour" :key="index">
                      <div class="match-header">
                        <span class="order">
                          <span>第{{ index + 1 }}场</span>&nbsp;<span>{{pair.startTime}}</span>
                        </span>
                        <span class="handle" v-if="pair.status==0">
                          <span @click="handleMatchEdit(pair)"><icon name="el-icon-Edit" /></span>
                          <el-button @click="handleUp(pair,index,sessionData.playTypeFour)" :disabled="index==0">
                            <el-tooltip
                                class="box-item"
                                content="向上移"
                                placement="top"
                            >
                              <icon name="el-icon-CaretTop" />
                            </el-tooltip>
                          </el-button>
                          <el-button @click="handleDown(pair,index,sessionData.playTypeFour)" :disabled="index==(sessionData.playTypeFour.length - 1)">
                            <el-tooltip
                              class="box-item"
                              content="向下移"
                              placement="top"
                            >
                              <icon name="el-icon-CaretBottom" />
                            </el-tooltip>
                          </el-button>
                        </span>
                      </div>
                      <div class="match-info" @click="handleMatchEdit(pair)">
                        <div class="team">
                          <div v-for="(player, playerIndex) in pair.teamOne" :key="playerIndex" class="player-info">
                            <el-avatar :size="30" :src="player.avatar" />
                            <span class="single-line">{{ player.name }}</span>
                          </div>
                        </div>
                        <div>
                          <span class="score-text">{{pair.playOneScore}}</span>
                          <span class="vs-text">VS</span>
                          <span class="score-text">{{pair.playTwoScore}}</span>
                        </div>
                        <div class="team">
                          <div v-for="(player, playerIndex) in pair.teamTwo" :key="playerIndex" class="player-info">
                            <el-avatar :size="30" :src="player.avatar" />
                            <span class="single-line">{{ player.name }}</span>
                          </div>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </el-card>
            </el-col>
            <el-col :span="5" v-if="formData.playType.includes('5')||formData.playType.includes('0')">
              <el-card class="match-card">
                <template #header>
                  <span class="card-header">男女混打出场顺序</span>
                  <div style="font-size: 12px;font-weight: 700;" v-if="sessionData.playAddressFive">{{sessionData.playAddressFive.address}} {{sessionData.playAddressFive.name}}</div>
                </template>
                <div>
                  <ul>
                    <li v-for="(pair, index) in sessionData.playTypeFive" :key="index">
                      <div class="match-header">
                        <span class="order">
                          <span>第{{ index + 1 }}场</span>&nbsp;<span>{{pair.startTime}}</span>
                        </span>
                        <span class="handle" v-if="pair.status==0">
                          <span @click="handleMatchEdit(pair)"><icon name="el-icon-Edit" /></span>
                          <el-button @click="handleUp(pair,index,sessionData.playTypeFive)" :disabled="index==0">
                            <el-tooltip
                                class="box-item"
                                content="向上移"
                                placement="top"
                            >
                              <icon name="el-icon-CaretTop" />
                            </el-tooltip>
                          </el-button>
                          <el-button @click="handleDown(pair,index,sessionData.playTypeFive)" :disabled="index==(sessionData.playAddressFive.length - 1)">
                            <el-tooltip
                                class="box-item"
                                content="向下移"
                                placement="top"
                            >
                              <icon name="el-icon-CaretBottom" />
                            </el-tooltip>
                          </el-button>
                        </span>
                      </div>
                      <div class="match-info">
                        <div class="team">
                          <div v-for="(player, playerIndex) in pair.teamOne" :key="playerIndex" class="player-info">
                            <el-avatar :size="30" :src="player.avatar" />
                            <span class="single-line">{{ player.name }}</span>
                          </div>
                        </div>
                        <div>
                          <span class="score-text">{{pair.playOneScore}}</span>
                          <span class="vs-text">VS</span>
                          <span class="score-text">{{pair.playTwoScore}}</span>
                        </div>
                        <div class="team">
                          <div v-for="(player, playerIndex) in pair.teamTwo" :key="playerIndex" class="player-info">
                            <el-avatar :size="30" :src="player.avatar" />
                            <span class="single-line">{{ player.name }}</span>
                          </div>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </el-card>
            </el-col>
          </el-row>


        </el-tab-pane>
        <el-tab-pane label="赛事场地" name="site">
          <el-row>
            <el-select v-model="queryParams.siteSchedule" @change="handleChageSite" placeholder="请选择赛事赛程" style="margin-right: 10px;">
              <el-option :disabled="formData.schedule<1" value="1" label="初赛"></el-option>
              <el-option :disabled="formData.schedule<2" value="2" label="半决赛"></el-option>
              <el-option :disabled="formData.schedule<3" value="3" label="总决赛"></el-option>
            </el-select>
            <el-button type="primary" @click="handleSiteAdd">
              <template #icon>
                <icon name="el-icon-Plus" />
              </template>
              新增
            </el-button>
          </el-row>
          <el-table class="mt-4" size="large" v-loading="siteTable.loading" :data="siteTable.lists">
            <el-table-column label="名称" prop="name" min-width="100" />
            <el-table-column label="地址" prop="address" min-width="100" />
            <el-table-column label="比赛方式" min-width="100">
              <template #default="{ row }">
                <el-tag type="success" v-if="row.playType == 1">男单打</el-tag>
                <el-tag type="danger" v-else-if="row.playType == 2">女单打</el-tag>
                <el-tag type="danger" v-else-if="row.playType == 3">男双打</el-tag>
                <el-tag type="danger" v-else-if="row.playType == 4">女双打</el-tag>
                <el-tag type="danger" v-else-if="row.playType == 5">男女混打</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="比赛赛程" prop="schedule" min-width="100">
              <template #default="{ row }">
                <el-tag v-if="row.schedule == 1">初赛</el-tag>
                <el-tag type="success" v-else-if="row.schedule == 2">半决赛</el-tag>
                <el-tag type="danger" v-else-if="row.schedule == 3">总决赛</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="160" fixed="right">
              <template #default="{ row }">
                <el-button
                    type="primary"
                    link
                    @click="handleSiteEdit(row)"
                >
                  编辑
                </el-button>
                <el-button
                    type="danger"
                    link
                    @click="handleSiteDelete(row.id)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="flex justify-end mt-4">
            <pagination v-model="siteTable" @change="getApplyLists" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="赛事规则" name="rule">
            <el-tabs v-model="activeRuleName" type="border-card" @tab-change="handleTabRuleChange">
              <el-tab-pane label="初赛" :name="1">
                <el-form
                    ref="ruleOneFormRef"
                    :model="ruleOneForm"
                    :rules="rules"
                    class="demo-ruleForm"
                    :size="formSize"
                    status-icon
                    label-width="120px"
                    style="max-width: 460px"
                >
                  <el-form-item label="胜局" prop="round">
                    <el-select v-model="ruleOneForm.round" placeholder="选择胜局" class="w-[340px]">
                      <el-option label="三局二胜" value="3/2" />
                      <el-option label="五局三胜" value="5/3" />
                    </el-select>
                    <div class="tips-info">三局两胜制‌：比赛采用三局两胜制，先赢得两局的一方获胜。</div>
                    <div class="tips-info">五局三胜制‌：比赛采用三局两胜制，先赢得两局的一方获胜。</div>
                  </el-form-item>
                  <el-form-item label="比赛赛制" prop="gameFormat">
                    <el-select v-model="ruleOneForm.gameFormat" placeholder="请选择比赛赛制" class="w-[340px]">
                      <el-option label="淘汰制" :value="1" />
                      <el-option label="积分制" :value="2" />
                    </el-select>
                    <div class="tips-info">
                      淘汰制：队伍选手两两对决，每场比赛采用三局两胜制。败者直接被淘汰，胜者晋级下一轮。
                    </div>
                    <div class="tips-info">
                      积分制：一般胜场积 3 分，负场积 0 分，积分按顺序排列，取晋级数量的队伍。
                    </div>
                  </el-form-item>
                  <el-form-item label="晋级数量" prop="promotedNum">
                    <el-select v-model="ruleOneForm.promotedNum" placeholder="请选择晋级数量" class="w-[340px]">
                      <el-option label="8队晋级" :value="8" />
                      <el-option label="16队晋级" :value="16" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="报名不足" prop="registrationLess">
                    <el-radio-group v-model="ruleOneForm.registrationLess">
                      <el-radio :label="1">直接晋级</el-radio>
<!--                      <el-radio :label="2">不晋级</el-radio>-->
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="开始时间" prop="startTime">
                    <el-input v-model="ruleOneForm.startTime" placeholder="请输入开始时间：9:30" />
                  </el-form-item>
                  <el-form-item label="比赛时段" prop="gameTime">
                    <el-input v-model="ruleOneForm.gameTime" placeholder="请输入比赛时段：9:30~12:00;14:00~18:00" />
                    <div class="tips-info">
                      9:30~12:00;14:00~18:00
                    </div>
                  </el-form-item>
                  <el-form-item label="比赛时长" prop="intervalTime">
                    <el-input v-model="ruleOneForm.intervalTime" placeholder="请输入比赛时间：45 分钟">
                      <template #append>分钟</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="胜局得分" prop="scoreType">
                    <el-select v-model="ruleOneForm.scoreType" placeholder="选择胜局得分" class="w-[340px]">
                      <el-option label="11分" :value="11" />
                      <el-option label="21分" :value="21" />
                    </el-select>
                    <div class="tips-info">
                      率先达到11分且至少领先对方2分的一方获胜，如果比分达到10平时，需要领先2分才算获胜，若双方打成19平时，先得到20分的一方获胜。
                    </div>
                    <div class="tips-info">
                      率先达到21分且至少领先对方2分的一方获胜，如果比分达到20平时，需要领先2分才算获胜，若双方打成29平时，先得到30分的一方获胜。
                    </div>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="handleSubmitRule(ruleOneFormRef)">
                      提交
                    </el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="半决赛" :name="2">
                <el-form
                    ref="ruleTwoFormRef"
                    :model="ruleTwoForm"
                    :rules="rules"
                    class="demo-ruleForm"
                    :size="formSize"
                    status-icon
                    label-width="120px"
                    style="max-width: 460px"
                >
                  <el-form-item label="胜局" prop="round">
                    <el-select v-model="ruleTwoForm.round" placeholder="选择胜局" class="w-[340px]">
                      <el-option label="三局二胜" value="3/2" />
                      <el-option label="五局三胜" value="5/3" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="比赛赛制" prop="gameFormat">
                    <el-select v-model="ruleTwoForm.gameFormat" placeholder="请选择比赛赛制" class="w-[340px]">
                      <el-option label="淘汰制" :value="1" />
                      <el-option label="积分制" :value="2" />
                    </el-select>
                  </el-form-item>
<!--                  <el-form-item label="晋级数量" prop="promotedNum">-->
<!--                    <el-select v-model="ruleTwoForm.promotedNum" placeholder="请选择晋级数量" class="w-[340px]">-->
<!--                      <el-option label="8队晋级" :value="8" />-->
<!--                      <el-option label="16队晋级" :value="16" />-->
<!--                    </el-select>-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="报名不足" prop="registrationLess">-->
<!--                    <el-radio-group v-model="ruleTwoForm.registrationLess">-->
<!--                      <el-radio label="直接晋级" name="1" :value="1" />-->
<!--                      <el-radio label="不晋级" name="2" :value="2"/>-->
<!--                    </el-radio-group>-->
<!--                  </el-form-item>-->
                  <el-form-item label="开始时间" prop="startTime">
                    <el-input v-model="ruleTwoForm.startTime" placeholder="请输入开始时间：9:30" />
                  </el-form-item>
                  <el-form-item label="比赛时段" prop="gameTime">
                    <el-input v-model="ruleTwoForm.gameTime" placeholder="请输入比赛时段：9:30~12:00;14:00~18:00" />
                  </el-form-item>
                  <el-form-item label="比赛时长" prop="intervalTime">
                    <el-input v-model="ruleTwoForm.intervalTime" placeholder="请输入比赛时间：45 分钟">
                      <template #append>分钟</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="胜局得分" prop="scoreType">
                    <el-select v-model="ruleTwoForm.scoreType" placeholder="选择胜局得分" class="w-[340px]">
                      <el-option label="11分" :value="11" />
                      <el-option label="21分" :value="21" />
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="handleSubmitRule(ruleTwoFormRef)">
                      提交
                    </el-button>
                  </el-form-item>
                </el-form>

              </el-tab-pane>
              <el-tab-pane label="决赛" :name="3">
                <el-form
                    ref="ruleThreeFormRef"
                    :model="ruleThreeForm"
                    :rules="rules"
                    class="demo-ruleForm"
                    :size="formSize"
                    status-icon
                    label-width="120px"
                    style="max-width: 460px"
                >
                  <el-form-item label="胜局" prop="round">
                    <el-select v-model="ruleThreeForm.round" placeholder="选择胜局" class="w-[340px]">
                      <el-option label="三局二胜" value="3/2" />
                      <el-option label="五局三胜" value="5/3" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="比赛赛制" prop="gameFormat">
                    <el-select v-model="ruleThreeForm.gameFormat" placeholder="请选择比赛赛制" class="w-[340px]">
                      <el-option label="淘汰制" :value="1" />
                      <el-option label="积分制" :value="2" />
                    </el-select>
                  </el-form-item>
<!--                  <el-form-item label="晋级数量" prop="promotedNum">-->
<!--                    <el-select v-model="ruleThreeForm.promotedNum" placeholder="请选择晋级数量" class="w-[340px]">-->
<!--                      <el-option label="8队晋级" :value="8" />-->
<!--                      <el-option label="16队晋级" :value="16" />-->
<!--                    </el-select>-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="报名不足" prop="registrationLess">-->
<!--                    <el-radio-group v-model="ruleThreeForm.registrationLess">-->
<!--                      <el-radio label="直接晋级" name="1" :value="1"/>-->
<!--                      <el-radio label="不晋级" name="2" :value="2"/>-->
<!--                    </el-radio-group>-->
<!--                  </el-form-item>-->
                  <el-form-item label="开始时间" prop="startTime">
                    <el-input v-model="ruleThreeForm.startTime" placeholder="请输入开始时间：9:30" />
                  </el-form-item>
                  <el-form-item label="比赛时段" prop="gameTime">
                    <el-input v-model="ruleThreeForm.gameTime" placeholder="请输入比赛时段：9:30~12:00;14:00~18:00" />
                  </el-form-item>
                  <el-form-item label="比赛时长" prop="intervalTime">
                    <el-input v-model="ruleThreeForm.intervalTime" placeholder="请输入比赛时间：45 分钟">
                      <template #append>分钟</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="胜局得分" prop="scoreType">
                    <el-select v-model="ruleThreeForm.scoreType" placeholder="选择胜局得分" class="w-[340px]">
                      <el-option label="11分" :value="11" />
                      <el-option label="21分" :value="21" />
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="handleSubmitRule(ruleThreeFormRef)">
                      提交
                    </el-button>
                  </el-form-item>
                </el-form>

              </el-tab-pane>
            </el-tabs>
<!--          <div class="py-4" v-html="formData.content"></div>-->
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <site-edit-popup v-if="showEdit" ref="siteEditRef" @success="getSiteLists" @close="showEdit = false" />
    <apply-edit-popup v-if="applyEdit" ref="applyEditRef" @success="handleChangeNaver" @close="applyEdit = false" />
    <apply-import ref="applyImportRef" @save-success="handleChangeNaver"></apply-import>
    <apply-detail-popup ref="applyDetailRef"></apply-detail-popup>
  </div>
</template>

<script lang="ts" setup>
import {competitionApplyLists} from "@/api/competition/apply";
import {reactive} from "vue";
import { ref } from 'vue';
import {
  competionRuleDetail,
  competitionBiSai,
  competitionDetail, competitionRuleAdd, competitionRuleEdit,
  competitionSession, competitionSessionDown, competitionSessionUp, competitionSiteDelete,
  competitionSiteLists
} from "@/api/competition/competition";
import SiteEditPopup from "./siteedit.vue";
import ApplyEditPopup from "./applyedit.vue";
import ApplyImport from "./applyImport.vue";
import ApplyDetailPopup from "./applyDetail.vue";
import feedback from "@/utils/feedback";

import {getRoutePath} from "@/router";
import {ElMessageBox, type FormInstance} from "element-plus";
import {competitionApplyExamine} from "@/api/member";
const route = useRoute()
const router = useRouter()
const siteEditRef = shallowRef<InstanceType<typeof SiteEditPopup>>()
const applyEditRef = shallowRef<InstanceType<typeof ApplyEditPopup>>()
const applyImportRef = shallowRef<InstanceType<typeof ApplyImport>>()
const applyDetailRef = shallowRef<InstanceType<typeof ApplyDetailPopup>>()
const showEdit = ref(false)
const applyEdit = ref(false)
const activeName = ref('apply')
const formData = reactive({
  id: '',
  name: '',
  cover: '',
  description: '',
  playTime: '',
  playEndTime: '',
  registrationTime: '',
  registrationEndTime: '',
  playType: '',
  orgParty: '',
  status: '',
  schedule: '',
  viewNum: 0,
  content: ''
})
const pager = reactive({
  page: 1,
  size: 15,
  loading: false,
  count: 0,
  lists: [] as any[],
  extend: {} as Record<string, any>
})
const sessionData = reactive({
  playTypeOne:[],
  playTypeTwo:[],
  playTypeThree:[],
  playTypeFour:[],
  playTypeFive:[],
  playAddressFive: {},
  playAddressFour: {},
  playAddressOne: {},
  playAddressThree: {},
  playAddressTwo: {}
})

const siteTable = reactive({
  page: 1,
  size: 15,
  loading: false,
  count: 0,
  lists: [] as any[],
  extend: {} as Record<string, any>
})
const splitRealName = (realName: any) =>{
  const realNames = realName.split(",")
  return realNames;
}
const handleTabChange = async (index: any) => {
  if(index=='apply'){
    await handleChangeNaver()
  }else if(index=='session'){
    await handleChangeSession();
  }else if(index=='site'){
    await getSiteLists()
  }else if(index=='rule'){
    const data = await competionRuleDetail({competitionId:route.query.id,schedule:1})
    Object.keys(ruleOneForm).forEach((key) => {
      //@ts-ignore
      ruleOneForm[key] = data[key]
    })
    if(ruleOneForm.roundCount) {
      ruleOneForm.round = ruleOneForm.roundCount + '/' + ruleOneForm.victoryCount
    }
  }
}
const handleChageSite = async (value:any) => {
  formData.schedule = value
  getSiteLists()
}
const getSiteLists = async () =>{
  const data = await competitionSiteLists({
    id: route.query.id,
    schedule: formData.schedule
  })
  siteTable.count = data?.count
  siteTable.lists = data?.lists
  siteTable.extend = data?.extend
}

const handleSiteAdd = async () => {
  showEdit.value = true
  await nextTick()
  siteEditRef.value?.open('add')
}

const handleSiteEdit = async (data: any) => {
  showEdit.value = true
  await nextTick()
  siteEditRef.value?.open('edit')
  siteEditRef.value?.getDetail(data)
}
const handleChangeNaver = async () => {
  const data = await competitionApplyLists({
    page_no: pager.page,
    page_size: pager.size,
    competitionId: route.query.id,
    schedule: queryParams.neverSchedule
  })
  pager.count = data?.count
  pager.lists = data?.lists
  pager.extend = data?.extend
}
const handleSiteDelete = async (id: number) => {
  await feedback.confirm('确定要删除？')
  await competitionSiteDelete({ id })
  feedback.msgSuccess('删除成功')
  getSiteLists()
}

const handleChangeSession = async () =>{
  const data = await competitionSession({
    id: route.query.id,
    schedule: queryParams.schedule
  })
  sessionData.playTypeOne = data.playTypeOne
  sessionData.playTypeTwo = data.playTypeTwo
  sessionData.playTypeThree = data.playTypeThree
  sessionData.playTypeFour = data.playTypeFour
  sessionData.playTypeFive = data.playTypeFive
  sessionData.playAddressFive =  data.playAddressFive
  sessionData.playAddressFour = data.playAddressFour
  sessionData.playAddressOne = data.playAddressOne
  sessionData.playAddressThree = data.playAddressThree
  sessionData.playAddressTwo = data.playAddressTwo
}

// 请求分页接口
const getApplyLists = async () => {
  pager.loading = true
  return competitionApplyLists({
    page_no: pager.page,
    page_size: pager.size,
    competitionId: route.query.id
  })
      .then((res: any) => {
        pager.count = res?.count
        pager.lists = res?.lists
        pager.extend = res?.extend
        return Promise.resolve(res)
      })
      .catch((err: any) => {
        return Promise.reject(err)
      })
      .finally(() => {
        pager.loading = false
      })
}
const queryParams = reactive({
  schedule: '',
  neverSchedule: '',
  siteSchedule: ''
})
const getDetail = async () => {
  const data = await competitionDetail({
    id: route.query.id
  })
  Object.keys(formData).forEach((key) => {
    //@ts-ignore
    formData[key] = data[key]
  })
  queryParams.schedule = formData.schedule
  queryParams.neverSchedule = formData.schedule
  queryParams.siteSchedule = formData.schedule
  console.log(queryParams.neverSchedule)
}
handleTabChange(activeName.value)
route.query.id && getDetail()
const hangleBiSai = async () => {
  await competitionBiSai({ id:formData.id,status:0 })
  await handleChangeSession();
}
const hangleExcelApply = () => {
  applyImportRef.value?.onOpen()
}
const handleApplyDetail = (row:any) => {
  applyDetailRef.value?.onOpen(row.teamNo)
}
const handleExamine = async (obj: any) => {
  await ElMessageBox.confirm(
      '审核团队【'+obj.teamNo+'】队员【'+obj.realName+'】报名申请是否通过？',
      '审核提示',
      {
        confirmButtonText: '通过',
        cancelButtonText: '不通过',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            done();
            handleConfirm(obj,1);
          } else if (action === 'cancel') {
            done();
            handleCancel(obj,2);
          } else {
            // 这里 action 是关闭图标触发的，可自定义标识
            done();
          }
        }
      }
  );

}
const handleConfirm = async (obj:any,status : number) => {
  await competitionApplyExamine({ id:obj.id,status:status })
  handleChangeNaver()
};

const handleCancel = async (obj:any,status : number) => {
  await competitionApplyExamine({ id:obj.id,status:status })
  handleChangeNaver()
};
const hangleAddApply = async () => {
  applyEdit.value = true
  await nextTick()
  applyEditRef.value?.open('add')
}
const rules = reactive({

})
const activeRuleName = ref(1)
const handleTabRuleChange = async (name:any) => {
  if(name == 1){
    const data = await competionRuleDetail({competitionId:route.query.id,schedule:1})
    if(data) {
      Object.keys(ruleOneForm).forEach((key) => {
        //@ts-ignore

        ruleOneForm[key] = data[key]
      })
      if (ruleOneForm.roundCount) {
        ruleOneForm.round = ruleOneForm.roundCount + '/' + ruleOneForm.victoryCount
      }
    }
  } else if(name==2){
    const data = await competionRuleDetail({competitionId:route.query.id,schedule:2})
    if(data) {
      Object.keys(ruleTwoForm).forEach((key) => {
        //@ts-ignore
        ruleTwoForm[key] = data[key]
      })
      if (ruleTwoForm.roundCount) {
        ruleTwoForm.round = ruleTwoForm.roundCount + '/' + ruleTwoForm.victoryCount
      }
    }
  }else if(name ==3){
    const data = await competionRuleDetail({competitionId:route.query.id,schedule:3})
    if(data) {
      Object.keys(ruleThreeForm).forEach((key) => {
        //@ts-ignore
        ruleThreeForm[key] = data[key]
      })
      if (ruleThreeForm.roundCount) {
        ruleThreeForm.round = ruleThreeForm.roundCount + '/' + ruleThreeForm.victoryCount
      }
    }
  }
}
const handleMatchEdit = (row: any) => {
  router.push({
    path: "/competition/match/detail",
    query: {
      id: row.competitionId,
      matchId: row.id,
    }
  });
}
const handleUp = async (pair:any,index:any,list:any) => {
  console.log(pair)
  if(index==0){
    return
  }
  const obj = list[index-1];
  console.log(obj)
  const param = {
    id: pair.id,
    orderNum: pair.orderNum,
    startTime: pair.startTime,
    downId: obj.id,
    downOrderNum: obj.orderNum,
    downStartTime: obj.startTime
  }
  await competitionSessionUp(param)
  await handleChangeSession();
}
const handleDown = async (pair:any,index:any,list:any) => {
  console.log(pair)
  if(index==(list.length - 1)){
    return
  }
  const obj = list[index+1];
  console.log(obj)
  const param = {
    id: pair.id,
    orderNum: pair.orderNum,
    startTime: pair.startTime,
    downId: obj.id,
    downOrderNum: obj.orderNum,
    downStartTime: obj.startTime
  }
  await competitionSessionDown(param)
  await handleChangeSession();

}
const formSize = ref('default')
// 定义通用的用户结构
const createUser = () => ({
  id: undefined,
  competitionId: '',
  round: '',
  gameFormat: '',
  promotedNum: '',
  registrationLess: '',
  roundCount: '',
  victoryCount: '',
  startTime: '',
  intervalTime: '',
  gameTime: '',
  scoreType: '',
  schedule: ''
});
const ruleOneForm = reactive(createUser());
const ruleTwoForm = reactive(createUser());
const ruleThreeForm = reactive(createUser());
const ruleOneFormRef = shallowRef<FormInstance>()
const ruleTwoFormRef = shallowRef<FormInstance>()
const ruleThreeFormRef = shallowRef<FormInstance>()
const handleSubmitRule = async (formRef:any) => {
  await formRef.validate()
  let formDataParam = {}
  console.log(activeRuleName)
  console.log(activeRuleName.value==1)
  if(activeRuleName.value==1){
    formDataParam = Object.assign(ruleOneForm);
    formDataParam.schedule = 1
  }else if(activeRuleName.value==2){
    formDataParam = ruleTwoForm
    formDataParam.schedule = 2
  }else if(activeRuleName.value==3){
    formDataParam = ruleThreeForm
    formDataParam.schedule = 3
  }
  if(formDataParam.round&&formDataParam.round.indexOf('/')>=0){
    var strings = formDataParam.round.split('/');
    formDataParam.roundCount = strings[0]
    formDataParam.victoryCount = strings[1]
  }
  formDataParam.competitionId = route.query.id
  if (formDataParam.id) {
    await competitionRuleEdit(formDataParam)
  } else {
    await competitionRuleAdd(formDataParam)
  }
}
const handleAdd = () =>{

}
const handleEdit = () => {

}
const handleDel = () => {

}
</script>

<style scoped lang="scss">
h1 {
  text-align: center;
  margin-bottom: 20px;
}

.match-card ul {
  list-style-type: none;
  padding: 0;
}

.match-card li {
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}
.match-header{
  position: relative;
  height: 25px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.match-info {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  & .team:first-child{
    text-align: right;
  }
}

.team {
  display: flex;
  flex-direction: column;
}

.player-info {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

/* VS 文本样式 */
.vs-text {
  font-size: 16px;
  font-weight: bold;
  color: #ff0000;
  margin: 0 5px;
}
.score-text{
  font-size: 20px;
  font-weight: bold;
  color: #000;
}
/* 卡片样式 */
.match-card {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 每场比赛项样式 */
.match-item {
  padding: 20px;
  border-bottom: 1px solid #eee;
  transition: background-color 0.3s ease;
}

.match-item:hover {
  background-color: #f9f9f9;
}

/* 出场顺序样式 */
.order {
  font-size: 12px;
  color: #333;
  font-weight: 700;
}
.handle{
  font-size: 18px;
  color: #333;
  font-weight: 500;
  & span{
    width: 25px;
    height: 25px;
    line-height: 25px;
    margin: 0 4px;
    cursor: pointer;
    & .el-icon{
      vertical-align: middle;
    }
  }
  & button{
    padding: 0;
    width: 25px;
    height: 25px;
    margin: 0;
    cursor: pointer;
    border-color: transparent;
  }
}

/* 队伍样式 */
.team {
  min-width: calc(50% - 35px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 选手信息样式 */
.player-info {
  display: flex;
  align-items: center;
  margin: 5px 0;
}

.el-box .el-col-5{
  max-width: 20%;
  flex: 0 0 20%;
}
.single-line {
  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
  width: 65px; /* 设置容器宽度，可根据实际情况调整 */
}
.tips-info {
  line-height: 18px;
  margin-top: 3px;
  color: #c0c4cc;
  font-size: 12px;
}
</style>
